<template>
<div id="div">

{{ time }}
 
 <div id="box">
  {{ title }}
 </div>
 
 <button @click="update">update</button>

 <button @click="login">登录</button>
</div>
</template>
<script setup> 
import { onBeforeMount,onMounted,onBeforeUpdate,ref,onUpdated,onBeforeUnmount,onUnmounted } from 'vue';
import { useRouter } from 'vue-router';

const time=ref();

let interval= setInterval(() => {

    time.value=new Date();

    console.log(new Date());
    
}, 500);


const title=ref("hello world");


onBeforeMount(() => {
    console.log("vue3组合式形式的生命周期函数 - onBeforeMount-挂载前");
})
onMounted(() => {
    console.log("vue3组合式形式的生命周期函数 - onMounted-挂载后");

    //作用  dom挂载完成  可以 操作dom  挂载第三方插件  如 echarts  地图应用。。。
})

onBeforeUpdate(() => {

    console.log("vue3组合式形式的生命周期函数 - onBeforeUpdate-更新前");
})

onUpdated(() => {
    // console.log("vue3组合式形式的生命周期函数 - onUpdated-更新后");
    // console.log(document.getElementById("box").innerHTML);
})

onBeforeUnmount(() => {
   // console.log("vue3组合式形式的生命周期函数 - onBeforeUnmount-卸载前");
    //清楚一些副作用  定时器 监听  解绑事件 等

    clearInterval(interval);



})
onUnmounted(() => {
    console.log("vue3组合式形式的生命周期函数 - onUnmounted-卸载后");
    //数据没销毁，解除响应式、销毁dom 
})


const router = useRouter();

const update=()=>{
    title.value="你好，世界";
}
const login = () => { 

    //登录成功
    sessionStorage.setItem("token", "123456");
    router.push("/");
    
}
//调接口
</script>
<style scoped lang='less'>
</style>